<template>
  <div>
    <div v-if="show" class="cus">
      <div class="cus_box" style="width:1000px;" v-loading="loading">
        <div class="title"><span>关联套餐</span> <i @click="show=false" class="el-icon-close"></i></div>
        <div class="content">

          <el-form :inline="true" label-width="auto">
            <el-form-item label="电池类型" prop="adName">
              <el-select v-model="btType" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="getData" type="primary">搜索</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="tableData"
            height="250"
            highlight-current-row
            border
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mealName"
              label="套餐名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="套餐费用">
            </el-table-column>
            <el-table-column
              prop="days"
              label="有效时长">
            </el-table-column>
            <el-table-column
              prop="num"
              label="更换次数">
            </el-table-column>
            <el-table-column
              label="电池类型">
              <template slot-scope="scope">
                <span>{{scope.row.btType}}V</span>
              </template>
            </el-table-column>
<!--            <el-table-column-->
<!--              prop="address"-->
<!--              label="已关联车辆">-->
<!--            </el-table-column>-->
            <el-table-column
              prop="ctime"
              label="更新时间">
            </el-table-column>
          </el-table>


          <div class="btns">
            <el-button @click="show=false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">关联</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {isMobile } from '@/utils/validate'
  export default {
    data () {
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      };
      return {
        btType:'',
        options:[
          {label:'48V',value:48},
          {label:'60V',value:60},
          {label:'72V',value:72}
        ],
        show:false,
        loading:false,
        fileList: [],
        src:'',
        dataForm: {
          adName:'',
          type:'',
          times:'',
          url:'',
          equipmentNos:''
        },
        equipmentNos_list:[],
        longitude:'',
        latitude:'',
        dataRule: {
          adName: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请上传', trigger: 'blur' }
          ],
          equipmentNos:[
            { required: true, message: '请选择', trigger: 'blur' }
          ]
        },
        tableData: [],

        deviceId:"",
        mealId:''
      }
    },
    computed:{

    },
    components:{

    },
    props:['res'],

    mounted(){

    },
    methods: {
      async getData(){
        const res=await this.apis.mealRent_list({
          pageNum:1,
          pageSize:10000,
          btType:this.btType
        });
        const list=res.rows||[];
        this.tableData=list;
      },
      handleCurrentChange(res){
          console.log(res);
          this.mealId=res.id;
      },
      showFun(ids){
        this.deviceId=ids.join(',');
        this.show=true;
        this.getData();
      },
      // 表单提交
      async dataFormSubmit () {
          if(!this.mealId){
              return this.$message({
                type:'error',
                message:'请选择套餐！'
              });
          }


          const res=await this.apis.deviceMealShip_save({
            deviceId:this.deviceId,
            mealId:this.mealId
          });


          this.show=false;


      },

    }
  }
</script>
<style scoped lang='scss'>

</style>
